<template>

<div class="my-info" style="flex:1;">
    <scroller class="scroller">
        <wxc-minibar class="border-bottom" title="个人信息" > </wxc-minibar>
        <div class="my-info-cont">
            <div class="my-info-card mb24" style="height:168px;">
                <text class="my-info-card-text">头像</text>
                <div class="my-card-cont" @click="openBottomPopup ">
                    <image :src=" personalDetails.avatar || 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/header-default.png'" style="width:112px; height:112px"></image>
                    <text class="discover_item_arrow">&#xe61c;</text>
                </div>
            </div>
            <div class="my-info-card b-b-s" style="height: 112px;" @click="linkrouter('nice')">
                <text class="my-info-card-text">昵称</text>
                <div class="my-card-cont">
                    <text class="card-cont-font">{{ personalDetails.nickName }}</text>
                    <text class="discover_item_arrow">&#xe61c;</text>
                </div>
            </div>

            <div class="my-info-card mb24" style="height: 112px;" @click="linkrouter('sex')">
                <text class="my-info-card-text">性别</text>
                <div class="my-card-cont">
                    <text class="card-cont-font">{{ personalDetails.sex == 0 ? '女' : '男' }}</text>
                    <text class="discover_item_arrow">&#xe61c;</text>
                </div>
            </div>

            <div class="my-info-card b-b-s" style="height: 112px;" @click="showListCity">
                <text class="my-info-card-text">城市</text>
                <div class="my-card-cont"  >
                    <text class="card-cont-font">{{ personalDetails.province == '' ? '未设置' : personalDetails.province }}</text>
                    <text class="discover_item_arrow">&#xe61c;</text>
                </div>
            </div>

            <div class="my-info-card" style="height: 112px;">
                <text class="my-info-card-text">简介</text>
                <div class="my-card-cont">
                    <text class="card-cont-font"></text>
                </div>
            </div>

            <div class="my-info-textarea">
                <textarea class="textarea" placeholder="用一段话介绍你自己" v-model="personalDetails.introduction" @change="changeFn" auto-appear="false"></textarea>
            </div>
        </div>

        <wxc-city ref="wxcCity"
            :animationType="animationType"
            :currentLocation="location"
            :cityStyleType="cityStyleType"
            :sourceData="sourceData"  
            @wxcCityItemSelected="citySelect"
            @wxcCityOnInput="onInput">
        </wxc-city>
        
        <wxc-popup
            ref="wxcSetPopup" 
            popup-color="#fff"
            :show="isRightShow"
            @wxcPopupOverlayClicked="popupOverlayBottomClick"
            pos="right"
            width="750">
            <set-info ref="setInfo" @setSave="getSave" :edit-pram="editPram"></set-info>
        </wxc-popup>

        <wxc-popup
            ref="wxcPopup" 
            popup-color="#fff"
            :show="isBottomShow"
            @wxcPopupOverlayClicked="popupOverlayBottomClick"
            pos="bottom"
            height="346">
            <div class="popup-bottom-cont">
                <div class="popup-bottom-list" @click="phone('camera')"><text class="popup-bottom-font">拍照</text></div>
                <div class="popup-bottom-list" @click="phone('photo')"><text class="popup-bottom-font">从手机相册选择</text></div>
                <div class="popup-bottom-list mbCode" @click="hidePopup"><text class="popup-bottom-font" >取消</text></div>
            </div>
        </wxc-popup>
        <button class="my-info-save" @click="updateUser"><text style="font-size:32px;color:#ffffff;" >保存</text></button>
    </scroller>
</div>
</template>
<script>
    import { Utils, WxcCity,WxcPopup   } from "weex-ui"
    import { postResponsesToken, customResponse} from '@/api'
    import sourceData from "@/city.js";
    import { serialize, getBaseUrl, jsonAnalysis, ceImg}  from "@/utils/index.js"
    import setInfo from "@/components/my-account/set-info.vue"
    import WxcMinibar from "@/components/modules/wxc-minibar/index.js"

    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    const sxglobalEvent = weex.requireModule('globalEvent')
    const navigator = weex.requireModule('navigator')
    let myAccount = new BroadcastChannel('app')

    export default {
        data() {
            return {
                isBottomShow:false,
                isRightShow:false,
                contentStyle:{},
                currentCity:'',
                sourceData:sourceData,
                animationType: 'push',
                cityStyleType:'list',
                location:"定位中",
                lock:false,
                domain:'',
                src:'',
                baseURL:'',
                cacheDate:{},
                personalDetails:{},
                editPram:{}
            }
        },

        components: {
            WxcMinibar,
            WxcCity,
            WxcPopup,
            setInfo
        },


        methods:{

            changeFn(){
                if(weex.config.env.platform === "iOS") {
                    weex.requireModule("eventKeyboardModule").keyboardHidden("keyboardHidden")
                }
            },
            // 唤起拍照
            openBottomPopup () {
                this.isBottomShow = true;
            },

            // 相机底部隐藏
            popupOverlayBottomClick(){
                this.isBottomShow = false
                this.isRightShow = false
            },
            // 隐藏底部弹窗
            hidePopup(){
                this.$refs.wxcPopup.hide()
            },

            phone(name){
                //SX说明 前端调用移动端 相机、相册 参数说明：相机：camera 相册：photo 
                weex.requireModule("eventCameraModule").launcherCameraWithType(name)
                this.$refs.wxcPopup.hide()
            },
            
       
        
            addListtenerCameraPhoto(){
                //添加相机、相册事件监听 
                
                sxglobalEvent.addEventListener("cameraImage", params => { 
                    // 返回图片的值
                    this.src = params.image

                    this.getItem('token').then((value)=>{
                        this.headImgUpload(value)
                    })       
                })
            },

            linkrouter(name){
                this.editPram = Object.assign( this.personalDetails, {'sign': name})
                this.isRightShow = true
            },
            
            // 接受参数修改

            getSave(value) {
                this.personalDetails = Object.assign(this.personalDetails, value)
                this.$refs.wxcSetPopup.hide()
            },

            showListCity () {
                this.cityStyleType = 'group'
                this.$refs['wxcCity'].show();
            },
            showGroupCity () {
                this.cityStyleType = 'group'
                this.$refs['wxcCity'].show();
            },

            citySelect (e) {
                this.currentCity = e.item.cityName
                this.personalDetails.province = e.item.cityName

            },

            onInput(e){
                this.currentCity = e.item.cityName
                this.personalDetails.province = e.item.cityName
            },


            // 获取缓存指定数据
            getItem (name) {
                return new Promise((resolve, reject)=>{
                    storage.getItem(name, event => {
                        if (event.result === "success") {
                            resolve(event.data);
                        } else {
                           reject('获取定位失败')
                        }
                    })
                })
            },

            // 缓存数据
            setItemDate(name, data) {
                return new Promise((resolve, rejects) => {
                    storage.setItem(name, JSON.stringify(data), event => {
                        if (event.result === "success") {
                            resolve(true)
                        } else {
                            rejects("获取缓存key失败!")
                        }
                    })
                })
            },
        
            // 图片自定义上传 （废除)
			async uploadSectionFile() {

                let data = await getResponse(testapi.jw.getToken)

                if( data.code === 0) {
                    this.domain =  'http://phemg1a03.bkt.clouddn.com'
                    this.initQiniu(data.data.token, this.src)
                }
			},

            async headImgUpload(value) {
                let data = await postResponsesToken('account/aly/aliyun/headImgUpload', {'base64': this.src})

                data.code === 0 && (this.personalDetails.avatar = data.data)
            },
            
            // 修改个人信息
            async updateUser(mobile) {

                if(!!this.lock) return ;

                this.personalDetails.sex = Number(this.personalDetails.sex) || 0
                
                let data = await postResponsesToken('account/user/updateUser', this.personalDetails)
                
                this.lock = true


                if( data.code === 0 ) {
                        
                    this.lock = false

                    this.setItemDate('personalDetails', Object.assign(this.cacheDate, this.personalDetails)).then(()=>{
                        myAccount.postMessage('post')
                        navigator.pop()
                    })
                   

                } else {
                    this.lock = false
                    modal.toast({message: data.msg })
                }
            },

            getCache() {
                this.getItem('personalDetails').then( (value) => {
                    this.cacheDate = JSON.parse(value)

                    let { avatar, sex, province, nickName, introduction, mobile } = this.cacheDate

                    this.personalDetails = { avatar, sex, province, nickName, introduction, mobile }
                })
            }
        },

        mounted() {
            //获取定位信息
            this.getItem('location').then((data)=>{
                this.location = data
            })
            
            this.getCache()

            // 获取路径
            this.baseURL = getBaseUrl(weex.config.bundleUrl, true)

            this.addListtenerCameraPhoto()//注册全局监听 
        },

        destroyed() {
            sxglobalEvent.removeEventListener('eventCameraModule');
        }
    }
</script>
<style scoped>
.scroller {
    width: 750px;
    position: fixed;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
.popup-bottom-cont {
    width:750px;
}

.popup-bottom-list {
    width:750px;
    height: 112px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-bottom-font {
    font-family: PingFangSC-Semibold;
    font-size: 32px;
    color: #333333;
}

.mbCode{
    border-top-width: 9px;
    border-top-color: rgb(153,153,153);
    border-top-style: solid;
}

.my-info {
    width: 750px;
    position: relative;
    z-index: 2;
    background-color: rgb(242, 243, 244);
    display: flex;
    align-items: center;
}

.my-info-header {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(239,239,239);
}

.b-b-s {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(240,240,240);
}

.my-info-card {
    display: flex;
    width:750px;
    background-color: #fff;
    padding-left:30px;
    padding-right:30px;
    box-sizing: border-box;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.my-info-card-text {
    font-size: 32px;
    color: #333;
    font-family: PingFangSC-Medium;
}

.discover_item_arrow {
  font-family: iconfttf;
  font-size: 26px;
  color: #d8d8d8;
  margin-left:32px;
}

.my-card-cont {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mb24 {
    margin-bottom:24px;
}

.card-cont-font {
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #666666;
    text-align: center;
}

.my-info-textarea {
    width:750px;
    height: 200px;
    background-color: #fff;
}

.textarea {
    width:750px;
    height: 200px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:30px;
    padding-right:30px;
    font-family: PingFangSC-Regular;
    font-size:28px;
    color: #333;
}

.my-info-save {
    width:686px;
	height: 96px;
	background-color: #E70D0D;;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-top-left-radius:4px;
	border-top-right-radius: 4px;
	margin-top:80px;
	margin-left:32px;
	margin-right:auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-con {
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  flex-direction: row;
}
.header-title {
  font-size: 34px;
  color: #fff;
  font-weight: 600;
  font-family: PingFangSC-Medium;
}

.border-bottom{
  border-bottom-color: #f1f1f1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

</style>
